<template>
	<view>
		<view style="filter: drop-shadow(1px 3px 12px #fd5448);">
			<view class="head" @click="getPhoneNumbers('5')">
				<view
					style="background-color:rgba(255, 255, 255, 0.4); width: 210rpx;height: 210rpx;border-radius: 50%;position: absolute;margin-top: 90rpx;margin-left: 275rpx;">
					<view
						style="background-color:rgba(255, 255, 255, 0.6); width: 180rpx;height: 180rpx;border-radius: 50%;position: absolute;margin-top: 15rpx;margin-left: 16rpx;">
						<view
							style="background-color:rgba(255, 255, 255, 0.8); width: 150rpx;height: 150rpx;border-radius: 50%;position: absolute;margin-top: 16rpx;margin-left: 16rpx;">
							<open-data type="userAvatarUrl" class="userinfo-avatar"></open-data>
						</view>
					</view>
				</view>
				
				<view class="userinfo-name">
					<open-data type="userNickName"></open-data>
				</view>
				<view class="userinfo-name" style="margin-top: 400rpx;font-weight: 200;">
					<text>{{islogin}}</text>
				</view>
				<view v-show="islogin !='立即登录'"
					style="position: absolute;margin-top: 430rpx;width: 100%;text-align: center;">
					<!-- <button class='btn1'>
						<image class='btnImg' src='@/static/images/rz.png'></image>
						<view>已登录</view>
					</button> -->
				</view>
			</view>
		</view>

		<view style="padding: 20rpx;margin-top: 0rpx;background-color: #FFFFFF;">

			<u-cell-group style="border-radius:10px;background-color: #FFFFFF;" :border="false">
				<u-cell-item :title-style="titleStyle" icon-size="40" @click="getPhoneNumbers('1')" icon="coupon-fill" :icon-style="{color:'#EA5344'}"
					title="电影票" style="background-color: #FFFFFF;" :arrow="false"></u-cell-item>
				<u-cell-item :title-style="titleStyle" icon-size="40" icon="pushpin-fill" style="background-color: #FFFFFF;"
					:icon-style="{color:'#EA5344'}" title="常见问题" value="" @click="getPhoneNumbers('2')" :arrow="false">
				</u-cell-item>
				<u-cell-item :title-style="titleStyle" icon-size="40" icon="question-circle-fill" style="background-color: #FFFFFF;"
					:icon-style="{color:'#EA5344'}" title="建议反馈" value="" @click="getPhoneNumbers('3')" :arrow="false">
				</u-cell-item>
				<!-- <u-cell-item :title-style="titleStyle" icon-size="40" icon="server-man" style="background-color: #FFFFFF;" :icon-style="{color:'#EA5344'}"
					title="在线客服" value="" @click="getPhoneNumbers('4')" open-type="contact" :arrow="false"></u-cell-item> -->
				<button  open-type="contact" class="but">
					<view class="but-box">
						<u-icon name="server-man" color="#EA5344" size="40"></u-icon>
						<text>在线客服</text>
					</view>
				</button>
				<u-cell-item icon="close-circle-fill" icon-size="40" v-show="islogin !='立即登录'" style="background-color: #FFFFFF;" :icon-style="{color:'#EA5344'}"
						title="账号解绑" value="" :arrow="false" :title-style="titleStyle" @click="exitlg()"></u-cell-item>
			</u-cell-group>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="show" :show-cancel-button="true" confirm-text="确认解绑" cancel-text="取消解绑" :content="content" @confirm="exit"></u-modal>
	</view>
</template>

<script>
	import Config from '../../common/config.js';
	export default {
		data() {
			return {
				content:"",
				show: false,
				islogin: "立即登录",
				code: "",
				titleStyle:{
					fontSize:'34rpx'
				},
				

			}
		},
		onLoad() {
			if (Config.phone != "" && Config.phone != undefined) {
				this.islogin = Config.phone
			} else {
				this.islogin = "立即登录"
			}

		},
		onShow() {
			if (Config.phone != "" && Config.phone != undefined) {
				this.islogin = Config.phone
			} else {
				this.islogin = "立即登录"
			}
		},
		methods: {
			exitlg(){
				this.content = "解除当前账号绑定之后，账户历史即权益将移除，请谨慎操作"
				this.show =true
			},
			exit(){
				Config.phone = ""
				Config.token = ""
				Config.openid = ""
				uni.setStorageSync("token", "")
				uni.setStorageSync("phone", "")
				uni.setStorageSync("openid", "")
				uni.reLaunch({
					url:'/pages/my/my'
				})
			},
			gohelp() {
				uni.navigateTo({
					url: '/pages/help/help'
				});
			},
			tips() {
				this.$refs.uToast.show({
					title: '暂未开放，敬请期待！',
					type: 'success'
				})
			},

			getPhoneNumbers(i) {
				if (this.islogin != "立即登录") {
					switch (i) {
						case '4':
							uni.navigateTo({
								url: '/pages/service/service'
							});
							break
						case '3':
							uni.navigateTo({
								url: '/pages/feedback/feedback'
							});
							break
						case '2':
							uni.navigateTo({
								url: '/pages/help/help'
							});
							break
						case '1':
							uni.navigateTo({
								url: '/pages/orderlist/orderlist'
							});

							break;
						default:
							break;
					}

				} else {
					uni.navigateTo({
						url: '/pages/login/login?path=/pages/my/my'
					});
				}
			}
		}

	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.userHead {
		width: 4.3rem;
		height: 4.3rem;
		border-radius: 50%;
		-webkit-animation: ani 2s linear infinite;
	}

	@keyframes ani {
		0% {
			box-shadow: 0 0 0px #ffffff
		}

		25% {
			box-shadow: 0 0 10px #ffffff
		}

		50% {
			box-shadow: 0 0 20px #ffffff
		}

		75% {
			box-shadow: 0 0 10px #ffffff
		}

		100% {
			box-shadow: 0 0 0px #ffffff
		}
	}

	.btn1 {
		height: 60rpx;
		width: 200rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		color: #5fbe00;
		border-radius: 8rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}

	.btnImg {
		margin-right: 8rpx;
		width: 46rpx;
		height: 46rpx;
	}

	.btn1::after {
		border-radius: 98rpx;
		border: 0;
	}

	.head {
		height: 600rpx;
		width: 100%;

		/* height: 100px; */
		background: #EA5344;
		-webkit-clip-path: polygon(0rpx 0rpx, 100% 0rpx, 100% 500rpx, 0rpx 600rpx);
		/* background: linear-gradient(#EA5344, rgb(254, 71, 71), rgb(245, 158, 11)); */
		/* background-image: url(../../static/images/cccccc.jpg);
		background-repeat: no-repeat;
		background-size: 100%; */

		text-align: center;

	}


	.bods {
		margin-top: -500rpx;
		margin-left: -200rpx;
		width: 100%;
		height: 0;
		border-bottom: 250px solid #FFFFFF;
		border-left: 990px solid transparent;
	}

	.userinfo-name {
		color: #FFFFFF;
		overflow: hidden;
		position: absolute;
		margin-top: 340rpx;
		font-size: 34rpx;
		text-align: center;
		font-weight: 500;
		width: 100%;
		/* margin-left: 0rpx; */
		font-weight: 700;
	}

	.userinfo-avatar {

		width: 150rpx;
		height: 150rpx;
		position: absolute;
		margin-top: 0rpx;
		margin-left: -76rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.but{
		
		background-color: #FFFFFF;
		    width: 100%;
		    padding-left: 0rpx;
		    padding-right: 0rpx;
		    border-bottom: 1rpx solid #f3f6f9;
		    border-radius: 0rpx;
	}
	button::after {
	    border: none;
		}
		.but-box{
			display: flex;
			align-items: center;
			margin-left: 22rpx;
		}
		.but-box text{
			font-size: 34rpx;
			color: #606266;
			padding-left: 10rpx;
		}
</style>
